<script setup lang="ts">
import type { CascaderTypeListResult } from "@/api/types";
import { ElMessage } from "element-plus";
import { toRef } from "vue";
import { cascaderTypeApi } from "@/api";
import { $t } from "@/plugins/i18n";
import { apiCall } from "@/utils/http/apiCall";
import CascaderItemDrawer from "./components/CascaderItemDrawer.vue";
import CascaderTypeFormDialog from "./components/CascaderTypeFormDialog.vue";
import { useCascaderTypeFormDialog, useCascaderTypeItemDrawer, useCascaderTypeTable } from "./composables";

defineOptions({
    name: "SysCascader",
});

const {
    tableLoading,
    tableData,
    tablePage,
    tableQuery,
    fetchTableData,
    handleTableQuery,
    resetTableQuery,
} = useCascaderTypeTable();

const {
    dialogVisible,
    typeDetail,
    openAddDialog,
    openEditDialog,
} = useCascaderTypeFormDialog();

const {
    drawerVisible,
    typeRow,
    openDrawer,
} = useCascaderTypeItemDrawer();

/** 删除字典 */
async function handleDelete(id: string): Promise<void> {
    await apiCall(
        () => cascaderTypeApi.remove(id),
        (data, resp) => {
            ElMessage.success($t(resp.message));
            fetchTableData();
        },
    );
}
</script>

<template>
    <el-card>
        <el-form :inline="true" :model="tableQuery" class="w-full">
            <el-form-item :label="$t('label.dictName')">
                <el-input
                    v-model.trim="tableQuery.name"
                    clearable
                    class="w-60!"
                    :placeholder="$t('placeholder.inputDictName')"
                    @keyup.enter="handleTableQuery"
                />
            </el-form-item>
            <el-form-item :label="$t('label.dictCode')">
                <el-input
                    v-model.trim="tableQuery.code"
                    clearable
                    class="w-60!"
                    :placeholder="$t('placeholder.inputDictCode')"
                    @keyup.enter="handleTableQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleTableQuery">
                    {{ $t("button.search") }}
                </el-button>
                <el-button @click="resetTableQuery">
                    {{ $t("button.reset") }}
                </el-button>
                <el-button type="primary" @click="openAddDialog">
                    {{ $t("button.add") }}
                </el-button>
            </el-form-item>
        </el-form>
        <el-page-table
            :loading="tableLoading"
            :data="tableData"
            :page="tablePage"
            :fetch-data="fetchTableData"
        >
            <el-table-column prop="name" :label="$t('label.dictName')" />
            <el-table-column prop="code" :label="$t('label.dictCode')" />
            <el-table-column :label="$t('label.operation')" width="200">
                <template #default="{ row }: { row: CascaderTypeListResult }">
                    <el-button type="primary" link @click="openEditDialog(row)">
                        {{ $t("button.edit") }}
                    </el-button>
                    <el-button type="primary" link @click="openDrawer(row)">
                        {{ $t("button.dictConfig") }}
                    </el-button>
                    <el-delete-button is-box @confirm="handleDelete(row.id)" />
                </template>
            </el-table-column>
        </el-page-table>

        <CascaderTypeFormDialog
            v-model:visible="dialogVisible"
            :edit-data="typeDetail"
            @success="fetchTableData"
        />
        <CascaderItemDrawer
            v-model:visible="drawerVisible"
            :dict-type="toRef(typeRow)"
        />
    </el-card>
</template>
